<template>
    <div>
        <Nav class="navBar">
            <div slot='left'  class='navImg' @click="back">
                <img src="../../assets/img/left.png">   
            </div>  
            <div  slot="center"  class="nav">
                <span v-for="(item,index) in arr" :key="index" class="navTitle" @click="detailsindex(index)" 
                :class="{detailsColor:detailsColor(index)}">{{item}}</span>
            </div>
        </Nav>
    </div>
</template>

<script>
import Nav from '../../components/content/nav/nav.vue'
export default {
    data(){
        return {
            counterIndex:0,
            arr:['商品','参数','评论','推荐']
        }
    },
    components:{
        Nav 
    },

    methods:{
        back(){
            this.$router.go(-1)
        },
        detailsindex(index){
            this.counterIndex=index;
             this.$emit('detailsNav',index)
        },
         detailsColor(index){
            
          return this.counterIndex===index
        }
    }
}
</script>

<style>
.navBar{
    display: flex;
    background-color: #fff;
    position: relative;
    z-index: 99;
    
}
    .detailsColor{
        color: #f00;
        border-bottom: 2px solid #f00;
        /* box-sizing: border-box; */
    }
    .navImg{
        width: 60px;
    }
    .navImg img{
        width: 24px;
        vertical-align: middle;
    }
    .nav{
      display: flex;
     
    }
    .navTitle{
        flex: 1;
       
    }
</style>